<template>
    <div class="page-container">
        <TableHead
            :config="tableHeaderConfig"
            :searchdata.sync="filters"
            :tabinline="true"
            @parentPageList="findPageList"
            v-show="showSearch"
        ></TableHead>
        <el-card class="card-box">
            <table-tool-bar :showSearch.sync="showSearch" @queryTable="findPageList" :columns="columns">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-close"
                    :disabled="userIds.length === 0"
                    @click="handleBatchDel"
                >
                    批量解绑
                </el-button>
            </table-tool-bar>
            <div class="role-name" type="danger">
                <i class="el-icon-user"></i>
                {{ roleName }}
            </div>
            <Table
                v-model="filters.pageNum"
                :columns="columns"
                :data="tableList"
                :total="total"
                :loading="loading"
                :ids="userIds"
                @getPageList="findPageList"
                @selection-change="selectChange"
            >
                <template slot="userName" slot-scope="{ scope }">
                    <i class="el-icon-user-solid" style="color: #409eff" v-if="scope.row.isAdmin === 1"></i>
                    {{ scope.row.userName }}
                </template>
                <template slot="structure" slot-scope="{ scope }">
                    {{ scope.row.companyName }}
                    <br />
                    {{ scope.row.deptName }}
                </template>
                <template slot="isLocked" slot-scope="{ scope }">
                    <el-tag v-if="scope.row.isLocked === 1" size="small" type="danger">禁用</el-tag>
                    <el-tag v-if="scope.row.isLocked === 0" size="small" type="success">启用</el-tag>
                </template>
                <template slot="oper" slot-scope="{ scope }">
                    <el-button size="mini" type="text" icon="el-icon-close" @click="handleDelete(scope.row.id)">
                        解绑
                    </el-button>
                </template>
            </Table>
        </el-card>
        <select-user v-model="visible" :roleId="roleId" @submitSuccess="getPageList"></select-user>
    </div>
</template>

<script>
import selectUser from './selectUser'
import TableHead from '@/components/TableHeadSearch'
import TableToolBar from '@/components/TableToolBar'
import { getAuthUserByRole, roleUnAuthUser } from '@/api/system/user'
import { confirm } from '@/utils/utils'

export default {
    name: 'AuthUser',
    components: { TableHead, TableToolBar, selectUser },
    props: {},
    data() {
        return {
            showSearch: true,
            tableList: [],
            total: 0,
            loading: false,
            filters: {
                roleId: '',
                name: '',
                userName: '',
                pageNum: 1,
                pageSize: 10
            },
            // 表格搜索处的字段
            tableHeaderConfig: [
                { title: '用户名', code: 'userName', type: 'input' },
                { title: '姓名', code: 'name', type: 'input' },
                { title: '手机号', code: 'mobile', type: 'input' },
                { title: '邮箱', code: 'email', type: 'input' }
                // { title: '是否启用', code: 'isValid' }
            ],
            columns: [
                { slot: 'userName', label: '用户名', visible: true, key: 'userName' },
                { prop: 'name', label: '姓名', visible: true, key: 'name' },
                { slot: 'structure', label: '公司/部门', visible: true, key: 'structure' },
                { slot: 'isLocked', label: '状态', align: 'center', visible: true, key: 'isLocked' },
                { prop: 'mobile', label: '手机', visible: true, key: 'mobile' },
                { prop: 'email', label: '邮箱', visible: true, key: 'email' },
                { label: '创建人/创建时间', type: 'createUser', visible: true, key: 'createUser' },
                { label: '更新人/更新时间', type: 'updateUser', visible: true, key: 'updateUser' },
                { slot: 'oper', label: '操作', align: 'center', visible: true, key: 'oper' }
            ],
            visible: false,
            roleId: null,
            userIds: [],
            roleName: ''
        }
    },
    created() {
        this.roleId = this.$route.params && this.$route.params.roleId
        this.roleName = this.$route.params && this.$route.params.roleName
        if (this.roleId) {
            this.filters.roleId = this.roleId
            this.findPageList()
        }
    },
    methods: {
        /** 查询绑定用户列表 */
        findPageList() {
            this.loading = true
            getAuthUserByRole(this.filters)
                .then((res) => {
                    this.tableList = res.data.items
                    this.total = res.data.total
                })
                .finally((res) => {
                    this.loading = false
                })
        },
        getPageList() {
            this.filters.pageNum = 1
            this.findPageList()
        },
        // 返回按钮
        handleClose() {
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push({ path: '/system/role' })
        },
        handleAdd() {
            this.visible = true
        },
        handleDelete(id) {
            confirm('确定要解绑吗？').then(() => {
                roleUnAuthUser({ roleId: this.roleId, userIdList: [id] }).then((res) => {
                    this.$message.success('解绑成功！')
                    this.getPageList()
                })
            })
        },
        handleBatchDel() {
            confirm('确定要批量解绑吗？').then(() => {
                roleUnAuthUser({ roleId: this.roleId, userIdList: this.userIds }).then((res) => {
                    this.$message.success('批量解绑成功！')
                    this.getPageList()
                    this.userIds = []
                })
            })
        },
        selectChange(nodes, ids) {
            this.userIds = ids
        }
    }
}
</script>
<style scoped lang="scss">
.role-name {
    border-bottom: 1px solid #ebeef5;
    line-height: 40px;
    padding-left: 15px;
    background: #f8f8f9;
    font-size: 14px;
}
</style>
